<template>
    <div class="popup_box modal fade detailed" id="detailed" tabindex="-1" role="dialog"
         aria-labelledby="detailed">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">操作明细</h4>
                </div>
                <div class="modal-body">
                    <p class="btn-p">
                        <button class="btn btn-success" @click="exportExcel">导出</button>
                    </p>
                    <div class="table">
                        <table>
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>设备名称</th>
                                <th>车牌号</th>
                                <th>报警类型</th>
                                <th>速度</th>
                                <th>开始时间</th>
                                <th>开始位置</th>
                                <th>结束位置</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(tab, index) in detailData">
                                <td>{{ index+1 }}</td>
                                <td>{{ tab.equipName }}</td>
                                <td>{{ tab.carNumber }}</td>
                                <td>{{ tab.content }}</td>
                                <td>{{ tab.speed }}</td>
                                <td>{{ tab.createTime }}</td>
                                <td>{{ tab.startPosition }}</td>
                                <td>{{ tab.endPosition }}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <p>
                        显示
                        <span>1</span>
                        到
                        <span>{{ detailData.length }}</span>
                        条记录，共
                        <span>{{ detailData.length }}</span>
                        条记录
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                detailData: []
            }
        },
        methods: {
            getData (res) {
                let obj = JSON.parse(JSON.stringify(res))
                let count = 0
                for (let data of obj) {
                    count++
                    let pointArr = []
                    if (data.lng === undefined || data.lat === undefined) {
                        continue
                    }
                    pointArr.push(new BMap.Point(data.lng, data.lat))
                    new BMap.Convertor().translate(pointArr, 1, 5, (res) => {
                        if (res.status === 0) {
                            data.lat = res.points[0].lat
                            data.lng = res.points[0].lng
                            new BMap.Geocoder().getLocation(new BMap.Point(data.lng, data.lat), (rs) => {
                                let addComp = rs.addressComponents
                                data.startPosition = addComp.province + ', ' + addComp.city + ', ' + addComp.district + ', ' + addComp.street + ', ' + addComp.streetNumber
                                if (obj.length === count) {
                                    this.detailData = obj
                                }
                            })
                        }
                    })
                }
            },
            exportExcel () {
                let a = document.createElement('a')
                a.setAttribute('target', '_blank')
                a.setAttribute('href', 'https://car.so360.org/obd/excel/alarmPrompt/dealerId/'
                    + this.detailData[0].userId + '/type/' + this.detailData[0].type)
                a.click()
                a = null
            }
        }
    }
</script>

<style scoped>
    .detailed .modal-header {
        padding: 0 30px;
        background: #1E282D;
        border-radius: 6px 6px 0 0;
    }

    .detailed .close {
        color: #fff;
        font-size: 30px;
        margin-top: 24px;
    }

    .detailed .modal-title {
        height: 80px;
        line-height: 80px;
        font-size: 16px;
        color: #fff;
    }

    .detailed .btn-p {
        text-align: right;
    }

    .detailed .table {
        height: 340px;
    }
</style>
